export default {
    name: "pop",
    callback: (el, binding) => {
        const html = `
        <div 
        id="popup"
        class="el-popper is-light el-popover el-popover--plain" 
        role="tooltip" aria-hidden="true"
        style="
        z-index: 2012;
        width: 200px;
        height: ${binding.value.title?'60px':'40px'};
        position: fixed;
        inset: auto auto 0px 0px;
        margin: 0px;
        display: none;
        "
        data-popper-placement="top-start">
        
            <!-- Workaround bug #6378 -->
            <div class="el-popover__title" role="title" style="display:${binding.value.title?'block':'none'}">
                ${binding.value.title}
            </div>
        
            <div>
                ${binding.value.content?binding.value.content:binding.value}
            </div>
        
            <span
                class="el-popper__arrow" data-popper-arrow=""
                style="position: absolute; left: 0px; transform: translate(40px, 0px);">
            </span>
                
            <span id="el-id-5908-0"
                role="tooltip"
                style="position: absolute; border: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; overflow-wrap: normal;">
            </span>
        </div>
        `;

        const div = document.createElement("div");
        div.innerHTML = html;
        document.body.appendChild(div);
        const popup = document.querySelector("#popup");

        el.onmouseenter = function (e) {
            popup.style.display = "block";
            popup.style.left = el.getBoundingClientRect().left + "px";
            popup.style.top = el.getBoundingClientRect().top - popup.clientHeight - 20 + "px";
        };

        el.onmouseleave = function (e) {
            popup.style.display = "none";
        };
    },
};
